{% extends 'base.html' %}
{% block css %}
  .form-control{
    display:inline-block;
  }
  #r-chart{
    width:100%;
    height:450px;
  }
{% endblock %}
{% block content %}
  <div class="row">
    <div class="col-md-12 grid-margin " id="kg">
      <div class="card" style="height:560px;">
        <div class="card-body">
          <form>
          <div class="form-row">
            <div class="col-md-3"></div>
            <div class="form-group col-md-5">
              <input type="text" class="form-control" id="search_content">
            </div>
            <div class="form-group col-md-1">
              <button class="btn btn-success btn-sm" type="button" id="searchBtn" >搜索</button>
            </div>
            <div class="col-md-3"></div>
          </div>
          </form>
          <div id="r-chart"></div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block js %}
  $(function(){
    $('#Search_Module i').css('color','#71c016');
    $('#Search_Module span').css('color','#71c016');
    $('#search_content').val('');
    var myChart = echarts.init(document.getElementById('r-chart'));
    myChart.showLoading({color: '#71c016'});
    $.ajax({
      type:"POST",
      url:"/search",
      data:{'search_content':''},
      success:function(graph){
        myChart.hideLoading();
        graph=JSON.parse(graph);
        if(graph.msg==1){
          option = {
            // 提示框的配置
            tooltip: {
              extraCssText: 'max-width:40%;overflow:scroll',//最大宽度以及超出处理
              enterable:true,//鼠标可以进入tooltip区域，使用滚动条
              formatter: function (x) {
                str=''
                if(x.data.type=='bean'){
                  str = `ID：${x.data.id}<br/>
                    中文名：${x.data.name}<br/>`
                }
                else if(x.data.type=='disease'){
                  str = `ID：${x.data.id}<br/>
                    中文名：${x.data.name}<br/>
                    英文名：${x.data.EN}<br/>
                    别名：${x.data.AN}<br/>
                    简介：${x.data.Brief}<br/>
                    为害症状：${x.data.Symptom}<br/>
                    发生因素：${x.data.Reason}<br/>
                    防治方法：${x.data.Method}<br/>`
                }
                else if(x.data.type=='insect'){
                  str = `ID：${x.data.id}<br/>
                    中文名：${x.data.name}<br/>
                    英文名：${x.data.EN}<br/>
                    别名：${x.data.AN}<br/>
                    简介：${x.data.Brief}<br/>
                    为害症状：${x.data.Symptom}<br/>
                    形态特征：${x.data.Feature}<br/>
                    生活习性：${x.data.Lifestyle}<br/>
                    发生因素：${x.data.Reason}<br/>
                    防治方法：${x.data.Method}<br/>`
                }
                else if(x.data.type=='pathongen'){
                  str = `ID：${x.data.id}<br/>
                    中文名：${x.data.name}<br/>
                    英文名：${x.data.EN}<br/>
                    别名：${x.data.AN}<br/>
                    缩写：${x.data.ABBR}<br/>
                    侵染循环：${x.data.Infect}<br/>`
                }
                else if(x.data.type=='edge'){
                  str = `关系名：${x.data.name}<br/>`
                }
                  return str;
                }
              },
              // 工具箱
              toolbox: {
                // 显示工具箱
                show: true,
                feature: {
                  mark: {
                    show: true
                  },
                  // 还原
                  restore: {
                    show: true
                  },
                  // 保存为图片
                  saveAsImage: {
                    show: true
                  }
                }
              },
              legend: [{
                data: graph.data.categories.map(function (a) {
                  return a.name;
                })
              }],
              color:['#9fe080','#ffdc60','#7ed3f4','#ff915a'],
              series: [{
                type: 'graph', // 类型:关系图
                layout: 'force', //图的布局，类型为力导图
                animation: false,
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [2, 10],
                edgeLabel: {
                  normal: {
                    textStyle: {
                      fontSize: 20
                    }
                  }
                },
                force: {
                  repulsion: 2500,
                  edgeLength: [10, 50],
                },
                draggable: true,
                lineStyle: {
                  color: 'source',
                  curveness: 0.3
                },
                emphasis: {
                  focus: 'adjacency',
                  lineStyle: {
                    width: 5
                  }
                },
                edgeLabel: {
                  normal: {
                    show: true,
                      formatter: function (x) {
                        return x.data.name;
                    }
                  }
                },
                label: {
                  normal: {
                    show: true,
                    textStyle: {}
                  }
                },
                // 数据
                data: graph.data.nodes,
                links: graph.data.links,
                categories: graph.data.categories,
              }]
            };
          myChart.setOption(option);
        }
      }
    })
  })
  $('#searchBtn').click(function(){
    search_content=$('#search_content').val();
    var myChart = echarts.init(document.getElementById('r-chart'));
    myChart.showLoading({color: '#71c016'});
    $.ajax({
      type:"POST",
      url:"/search",
      data:{'search_content':search_content},
      success:function(graph){
        myChart.hideLoading();
        graph=JSON.parse(graph);
        if(graph.msg==1){
          option = {
            // 提示框的配置
            tooltip: {
              extraCssText: 'max-width:40%;overflow:scroll',//最大宽度以及超出处理
              enterable:true,//鼠标可以进入tooltip区域，使用滚动条
              formatter: function (x) {
                str=''
                if(x.data.type=='bean'){
                  str = `ID：${x.data.id}<br/>
                    中文名：${x.data.name}<br/>`
                }
                else if(x.data.type=='disease'){
                  str = `ID：${x.data.id}<br/>
                    中文名：${x.data.name}<br/>
                    英文名：${x.data.EN}<br/>
                    别名：${x.data.AN}<br/>
                    简介：${x.data.Brief}<br/>
                    为害症状：${x.data.Symptom}<br/>
                    发生因素：${x.data.Reason}<br/>
                    防治方法：${x.data.Method}<br/>`
                }
                else if(x.data.type=='insect'){
                  str = `ID：${x.data.id}<br/>
                    中文名：${x.data.name}<br/>
                    英文名：${x.data.EN}<br/>
                    别名：${x.data.AN}<br/>
                    简介：${x.data.Brief}<br/>
                    为害症状：${x.data.Symptom}<br/>
                    形态特征：${x.data.Feature}<br/>
                    生活习性：${x.data.Lifestyle}<br/>
                    发生因素：${x.data.Reason}<br/>
                    防治方法：${x.data.Method}<br/>`
                }
                else if(x.data.type=='pathongen'){
                  str = `ID：${x.data.id}<br/>
                    中文名：${x.data.name}<br/>
                    英文名：${x.data.EN}<br/>
                    别名：${x.data.AN}<br/>
                    缩写：${x.data.ABBR}<br/>
                    侵染循环：${x.data.Infect}<br/>`
                }
                else if(x.data.type=='edge'){
                  str = `关系名：${x.data.name}<br/>`
                }
                  return str;
                }
              },
              // 工具箱
              toolbox: {
                // 显示工具箱
                show: true,
                feature: {
                  mark: {
                    show: true
                  },
                  // 还原
                  restore: {
                    show: true
                  },
                  // 保存为图片
                  saveAsImage: {
                    show: true
                  }
                }
              },
              legend: [{
                data: graph.data.categories.map(function (a) {
                  return a.name;
                })
              }],
              color:['#9fe080','#ffdc60','#7ed3f4','#ff915a'],
              series: [{
                type: 'graph', // 类型:关系图
                layout: 'force', //图的布局，类型为力导图
                animation: false,
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [2, 10],
                edgeLabel: {
                  normal: {
                    textStyle: {
                      fontSize: 20
                    }
                  }
                },
                force: {
                  repulsion: 2500,
                  edgeLength: [10, 50],
                },
                draggable: true,
                lineStyle: {
                  color: 'source',
                  curveness: 0.3
                },
                emphasis: {
                  focus: 'adjacency',
                  lineStyle: {
                    width: 5
                  }
                },
                edgeLabel: {
                  normal: {
                    show: true,
                      formatter: function (x) {
                        return x.data.name;
                    }
                  }
                },
                label: {
                  normal: {
                    show: true,
                    textStyle: {}
                  }
                },
                // 数据
                data: graph.data.nodes,
                links: graph.data.links,
                categories: graph.data.categories,
              }]
            };
          myChart.setOption(option,true);
        }
        else{
          $('#liveToast').removeClass('hide');
          $('#liveToast').addClass('show');
          $('#toastText').html('暂无检索结果！');
          setTimeout(function (){
            $('#liveToast').addClass('hide');
            $('#liveToast').removeClass('show');
          }, 3000);
        }
      }
    })
  })
{% endblock %}
